<script setup lang="tsx">
import { reactive, ref, watch } from 'vue';
import { getBadnessList } from '@/service/api';

const lotId = defineModel<string>('lotId', { required: true });

const page = ref({
  pageNum: 1,
  pageSize: 200
});
const pagination = reactive({
  current: page.value.pageNum,
  pageSize: page.value.pageSize,
  showSizeChanger: true,
  pageSizeOptions: ['50', '100', '200', '300', '500'],
  showQuickJumper: true,
  showTotal: (total: number, range: number[]) => {
    return `共${total}条`;
  },
  total: 0,
  onChange: async (current: number, size: number) => {
    pagination.current = current;
    pagination.pageSize = size;
    page.value.pageNum = current;
    page.value.pageSize = size;
    getData();
  }
});

const tableData = ref([]);
const loading = ref(false);
const columns = ref<any[]>([
  {
    key: 'index',
    dataIndex: 'index',
    title: '序号',
    align: 'center',
    width: 70,
    checked: true,
    ellipsis: true
  },
  {
    key: 'scrapPnlId',
    dataIndex: 'scrapPnlId',
    title: 'PNL ID',
    align: 'center',
    width: 140,
    checked: true,
    ellipsis: true
  },
  {
    key: 'lotId',
    dataIndex: 'lotId',
    title: '生产批号',
    align: 'center',
    width: 140,
    checked: true,
    ellipsis: true
  },
  {
    key: 'productName',
    dataIndex: 'productName',
    title: '产品名称',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'productVer',
    dataIndex: 'productVer',
    title: '产品版本',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'customerPart',
    dataIndex: 'customerPart',
    title: '客户',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'createTime',
    dataIndex: 'createTime',
    title: '建立时间',
    align: 'center',
    width: 180,
    checked: true,
    ellipsis: true
  },
  {
    key: 'componentStatus',
    dataIndex: 'componentStatus',
    title: '不良状态',
    align: 'center',
    width: 140,
    checked: true,
    ellipsis: true
  },
  {
    key: 'note',
    dataIndex: 'note',
    title: '报废原因',
    align: 'center',
    width: 140,
    checked: true,
    ellipsis: true
  },
  {
    key: 'woId',
    dataIndex: 'woId',
    title: '工单',
    align: 'center',
    width: 140,
    checked: true,
    ellipsis: true
  }
]);

const currentRowId = ref(null);
const customRow = record => {
  return {
    // style: {
    //   'background-color': record.scrapPnlId === currentRowId.value ? 'rgba(86, 205, 243, 0.3)' : ''
    // },
    class: record.scrapPnlId === currentRowId.value ? 'jl-table-row-selected' : '',
    onClick: () => {
      currentRowId.value = record.scrapPnlId;
    }
  };
};

function getData() {
  const params = {
    ...page.value,
    lotId: lotId.value
  };
  loading.value = true;
  getBadnessList(params)
    .then(({ data, error }) => {
      if (!error) {
        data.list.forEach((item: any, index: number) => {
          item.index = index + 1;
        });
        pagination.total = data.total;
        tableData.value = data.list;
      }
    })
    .finally(() => (loading.value = false));
}

watch(
  () => lotId.value,
  val => {
    if (val) {
      page.value.pageNum = 1;
      pagination.current = 1;
      getData();
    }
  }
);
</script>

<template>
  <ACard
    :bordered="false"
    :body-style="{ flex: 1, overflow: 'hidden' }"
    class="table-card h-full flex-col-stretch sm:flex-1-hidden card-wrapper"
  >
    <template #extra>
      <TableColumnSetting v-model:columns="columns" />
    </template>
    <ATable
      ref="tableWrapperRef"
      :columns="columns"
      :data-source="tableData"
      bordered
      size="small"
      :loading="loading"
      row-key="id"
      :pagination="pagination"
      :custom-row="customRow"
      :scroll="{ y: 'atuo' }"
      class="h-full"
    />
  </ACard>
</template>

<style></style>
